---
authors: [lijin]
tags: [Dora SSR]
---

import "@site/src/languages/highlight";

# Dora SSR 带来游戏开发新体验

## 对游戏引擎开发的一些思考

&emsp;&emsp;曾几何时，每次游戏引擎的重大突破都会带来行业技术发展的飞跃：例如从 2D 到 3D 渲染，从简单的光照到实时光影和物理模拟。这些革新为游戏开发开创了无限可能，推动了整个行业的前进。如今，随着技术的成熟，颠覆性的创新也越来越少见。

<!-- truncate -->

&emsp;&emsp;现在，游戏引擎的开发更注重**优化和改进现有技术**，提升用户体验和开发效率。特别是在开源引擎项目中，整合和完善现有的开源库显得尤为重要。毕竟，开源开发者通常缺乏资源和人力，没有必要从头开发物理引擎、字体加载或动画模型运行时。换句话说，目前做开源游戏引擎开发可能很大程度的工作量是**整合现有的成熟流行的第三方功能库**。

&emsp;&emsp;这种方法不仅提高了开发效率，也让游戏引擎更灵活，能更好地满足不同类型的游戏开发需求。通过复用现有的开源库，开发者可以专注于创新游戏玩法和内容，而不是重复造基础轮子。这样，开发游戏引擎更像是**搭建一个服务平台**，为开发者提供了满足各自需求的基础设施，让他们能更专注于创作。

## Dora SSR 引擎的定位

&emsp;&emsp;说到服务平台，我们在做的 Dora SSR 开源游戏引擎的定位是**提供一个易于上手、跨设备兼容的游戏引擎及开发工具链**。如果要与内置开发 IDE 的 Godot 引擎相比，Dora SSR 的不同之处在于，它**内置的游戏编辑器**是用 ReactJS 开发的 **Web 应用**。

&emsp;&emsp;这意味着 Dora 的编辑器和运行时能够在不同平台上独立运行，甚至跨硬件设备运行。这样，开发中的游戏程序和 IDE 不会在同一个程序进程中互相影响，也不会互抢资源。最终，仍然可以像 Godot 一样，将运行时和开发工具一起打包成一个 App 或安装包，方便分发。使得准备游戏开发环境的难度就像安装一个手机 App 一样简单。

&emsp;&emsp;不过，Dora SSR 目前还不支持完整的 3D 渲染功能，尽管游戏场景的节点对象有 Z 坐标和 XY 轴旋转属性，默认使用的是 3D 摄像机。但 3D 动画模型、材质管理以及完整的 3D 渲染管线尚未实现。由于项目维护者精力有限，我们也没有能力制作高级的 3D 美术资源和游戏作品，这也是我们暂时没有钞能力加持下的开源开发者的局限。

&emsp;&emsp;可是，没能做到第一，那么喜欢的事就完全不要去做了么？

## 开源、开源还是开源！

&emsp;&emsp;当然不是。做开源的游戏引擎，是因为对这项事业有着无尽的热爱。**开源文化**代表着共享、合作和创新，这种精神深深地吸引着我们。开源不仅是一种开发模式，更是一种信念——相信每个人都能为技术进步，对所热爱领域的发展，贡献一份力量，无论大小。

&emsp;&emsp;在游戏领域，开源的意义尤为重大。通过开源，更多的开发者可以参与进来，共同完善和优化引擎，推动技术的不断进步。而且，开源让更多的人有机会学习和成长，无论是初学者还是资深开发者，都能从中受益。对于我来说，看到一个个开源项目因为大家的努力而变得更好，看到越来越多的人因为开源而找到自己的梦想，这是很令人激动的一件事。

&emsp;&emsp;我设想一个更加**开源开放**的**游戏创作**的世界：在这个世界里，每一个有创意的人都可以自由地获取和使用各种资源，毫无阻碍地实现他们的想法。每一个开发者都可以自由分发和分享他们的成果，接受来自全球各地的反馈和建议。这样的开放环境不仅能加速技术的发展，也能培养更多优秀的开发者，推动整个行业的进步。作为一个游戏老饕，通过大家分享接力的努力，我也能在未来有更多有趣和特别的游戏作品的选择。

## 那么就聊聊动手的事吧！

&emsp;&emsp;Dora SSR 引擎目前版本（v1.5.1）的软件架构如下：

<p align="center">
  <img src={require('@site/static/img/dora-ssr-architecture.png').default} alt='Dora SSR 软件架构'/>
   Dora SSR 软件架构
</p>

&emsp;&emsp;总结起来，Dora SSR 的软件架构分为三个层次：**硬件适配层、引擎核心功能层、以及用户接口层**。

### 硬件适配层

&emsp;&emsp;首先是硬件适配层，它确保 Dora SSR 能在各种操作系统和硬件平台上运行。无论是 Windows、Linux、macOS，还是移动设备上的 iOS 和 Android，Dora SSR 都能够通过 SDL2 和实现 RHI（Render Hardware Interface）技术框架 bgfx，实现跨平台兼容性。bgfx 是一个抽象层，它为底层的渲染接口技术（包括 OpenGL、Metal、DirectX 和 Vulkan 等）提供统一的接口。这些技术解决了对底层的**操作系统接口**和**图形渲染接口**的适配问题，使得引擎在不同的硬件环境中都能高效运行。

### 引擎核心功能层

&emsp;&emsp;其次是引擎核心功能层，这是 Dora SSR 的“心脏”。它包括多个子功能层级，分别负责不同的引擎功能：

- **渲染层**：包括 Line Renderer、Sprite Renderer、VG Renderer 和 ImGui Renderer，用于分类批量的处理各种图形渲染请求的渲染器。
- **功能层**：涵盖 Physics（物理）、Assets（资源管理）、Graphic（图形）、Network（网络）、Audio（音频）和ML（机器学习）等基础功能模块。
- **游戏框架层**：包含 Platformer Game（平台游戏）、AI（人工智能）、Unit（单位管理）和 Action（动作管理）等模块，为游戏逻辑和玩法提供支持。

### 用户接口层

&emsp;&emsp;最后是用户接口层，这是开发者直接与引擎交互的部分。Dora SSR 提供了强大的 Web IDE 层，整合了其它开源项目的成果如 Monaco Editor（VSCode 的前端）、Code Wire（可视化脚本编辑器）、Yarn Editor（游戏剧本编辑器）、Spine Player（Spine2D 动画预览）和 TypeScript 编译器。这些工具集成在一起，为开发者提供了一个提供尽可能完善的功能的、易于使用的开发环境，让他们可以快速上手，专注于创意和内容的实现。

&emsp;&emsp;另外用户接口层还包括用于加载、编译和运行开发者编写的游戏脚本代码的运行时和语言编译器，提供 Lua VM、WASM VM、YueScript 编译器、Teal 编译器和多种语言绑定等，从而能支持多种脚本语言，让开发者能够更灵活地选用进行游戏开发。

&emsp;&emsp;Dora SSR 的架构设计试图考虑跨平台兼容性、功能模块化和用户体验，最后以其开源的方式，让更多的开发者能够参与进来，共同打造一个强大、灵活的游戏开发平台。努力通过层次分明、清晰可扩展的架构，Dora SSR 简化开发流程并为开发者提供了丰富的功能支持，来实现了让游戏开发变得更轻松、更有趣的目标。

### 用户功能视角下的 Dora SSR 引擎

&emsp;&emsp;然后从用户功能的角度来看 Dora SSR 开源引擎，Dora SSR 引擎就是分为了两个部分，一个是引擎运行时，一个是 Web IDE。其中引擎运行时是可以完全分离 Web IDE 的程序和外置资源独立运行的。只要从发布的引擎中简单的删除 Web IDE 运行所需要脚本和资源，就能得到一个纯粹的 Dora SSR 运行时程序，并可以用来只加载开发好的游戏程序和资源打包为独立发布的游戏。

### Dora SSR 引擎运行的流程

&emsp;&emsp;Dora SSR 引擎执行的流程从数据流处理的角度可以很容易理解，用户编写的游戏脚本里基本上都是在做游戏逻辑数据的处理和提交的操作。当这些数据提交到了引擎核心模块后，会做进一步的数据转换、加工与合并处理，最终生成提交给 GPU 渲染需要的数据等形式，以不限于图形更新展示的方式完成游戏的反馈和交互。


## 部分 Web IDE 功能的展示

* **代码编辑器**

<p align="center">
  <img src={require('@site/static/img/showcase1.jpg').default} alt='Dora SSR 代码编辑器'/>
   Dora SSR 代码编辑器
</p>

&emsp;&emsp;Dora SSR 的 Web IDE 提供了完善的代码编辑器功能，支持多种编程语言和文件类型。在这张演示图中，我们可以看到用户可以编写 TypeScript 代码，使用 TSX 进行游戏对象的行为定义和控制。左侧的文件树展示了项目的资源结构，包括脚本、资源和配置文件等。代码编辑器具备语法高亮、自动补全等功能、文档跳转的功能，提升了开发效率。此外，右下角的小窗口展示了所关联的引擎运行时实时预览的效果，开发者做了文件修改就能**即时查看**代码的**运行效果**。

* **Yarn Spinner 剧本编辑器**

<p align="center">
  <img src={require('@site/static/img/showcase2.jpg').default} alt='Dora SSR 剧本编辑器'/>
   Dora SSR 剧本编辑器
</p>

&emsp;&emsp;Dora SSR 的 Web IDE 中集成了 Yarn Spinner 剧本编辑器，这为游戏开发者提供了直观高效的故事编写工具。在这张演示图中，可以看到 Yarn Spinner 编辑器的界面，用户正在编写一个包含决策点的互动剧本。中央的编辑窗口展示了当前正在编辑的剧本内容，支持富文本格式，并且可以通过简单的标签如 `<<jump>>` 实现剧情跳转。

&emsp;&emsp;右侧的可视化节点图展示了剧本的流程，每个节点代表一个剧情片段，节点之间通过线条连接，清晰地展示了剧情的走向和决策路径。这种图形化的剧本编辑方式，使得开发者能够直观地设计和调整剧情流程。

&emsp;&emsp;Yarn Spinner 的这些功能，不仅提升了游戏剧本编写测试的效率，还方便了复杂剧情的设计和管理，帮助 Dora SSR 的 Web IDE 成为了一个功能全面的游戏开发平台。

* **Visual Script 编辑器**

<p align="center">
  <img src={require('@site/static/img/showcase3.jpg').default} alt='Dora SSR 可视化脚本编辑器'/>
   Dora SSR 可视化脚本编辑器
</p>

&emsp;&emsp;Dora SSR 的 Web IDE 集成了 Visual Script 编辑器，这个功能主要面向**编程初学者**，特别是青少年，帮助他们顺利进行编程学习的过渡和上手体验。在这张演示图中，可以看到 Visual Script 编辑器的界面，采用了图形化的编程方式，通过拖拽和连接不同的节点来创建程序逻辑。

&emsp;&emsp;左侧的面板显示了变量管理功能，用户可以轻松添加和管理变量。中央的工作区展示了各种节点，包括循环、条件判断和数组操作等。用户可以通过直观的方式将这些节点连接起来，构建复杂的程序逻辑。在右侧还有一个被折叠的面板，可以实时查看用户编辑的可视化脚本最终编译的，用于在引擎加载执行的 Teal 程序代码。

&emsp;&emsp;这种图形化编程方式降低了编程的门槛，让初学者无需掌握复杂的语法就能理解和实现基本的编程概念。对于青少年来说，这种方式不仅增加了学习的趣味性，还能培养他们的逻辑思维和问题解决能力，帮助更多人轻松入门编程世界。

* **Spine 动画预览**

<p align="center">
  <img src={require('@site/static/img/showcase4.jpg').default} alt='Dora SSR 动画预览'/>
   Dora SSR 动画预览
</p>

&emsp;&emsp;Dora SSR 的 Web IDE 中还集成了 Spine2D 动画模型预览功能。通过这个功能，开发者可以方便地查看和调整 Spine 动画模型，包括切换动画模型的皮肤和播放不同的动画。帮助大家在程序中正确的加载和播放 Spine 动画模型。

## 在多种设备上开发游戏的用户体验

&emsp;&emsp;最后来聊聊用户体验，前面所说 Dora SSR 的目标是搭建游戏开发的环境像安装和使用 App 一样快捷和简单。这个 Dora 真的可以做到吗？

&emsp;&emsp;我们已经在尝试在各种移动设备、掌机和嵌入式设备上运行了 Dora SSR，通过远程访问 Web IDE 来使用游戏开发和测试的功能。在树莓派，国产 MCU，手机上的各种高性能 SOC 上，Dora SSR 都能提供比较流畅的使用体验。甚至部分自带键盘轨迹球外设的小众移动设备上，我们也能同时运行引擎，并通过本地打开浏览器访问开发环境，把做游戏变成随时随地可及的娱乐活动。

&emsp;&emsp;不过，为了确保良好的使用体验，我们建议在小屏设备上开发游戏时，至少使用一块更大的显示屏幕，带键盘的 Android 平板或是 iPad 来远程访问和使用 Web IDE 开发游戏，以获得更舒适的游戏开发体验。无论是在家中、咖啡馆还是户外，Dora SSR 都能为开发者提供随时随地的游戏开发环境，让创作不再受限于设备和地点。

<p align="center">
  <img src={require('@site/static/img/dev-everywhere.jpg').default} alt='Dora SSR 跨平台开发'/>
   Dora SSR 跨平台开发
</p>

## 加入我们的社区

&emsp;&emsp;如果你对 Dora SSR 感兴趣，欢迎加入我们的社区，与我们一起探讨、交流、合作。可以通过以下方式找到我们：

- GitHub 项目地址：https://github.com/IppClub/Dora-SSR
- Gitee 项目地址：https://gitee.com/pig/Dora-SSR
- AtomGit 项目地址：https://atomgit.com/ippclub/Dora-SSR
- QQ 群号：512620381

&emsp;&emsp;期待你的加入，一起推动开源游戏引擎的发展！

## 后续预告

&emsp;&emsp;在接下来的系列文章中，我们将深入介绍 Dora SSR 的各个程序模块，带你详细了解这个不断迭代发展的游戏引擎的内部工作原理和各种实现技巧，敬请关注我们的更新吧。